<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{
            height:35px;
            border: 1px solid #e1e1e1;
        }

        div{
            font-size: 10px;
            color: white;
        }
    </style>
</head>
<body>
    请输入密码：<input type="password" id="password">
    <div id="div">请输入</div>

    <script>
        //有一个密码输入框，要求输入内容：大小写字母开头，数字、大小写字母、下划线组成的长度为6~16位的字符组成。
        //如果用户输入的内容不符合这个规则，则在输入框下面显示错误信息。
        //^[a-zA-Z]\w{5,15}$ 
        let input=document.querySelector('input');
        let div=document.getElementById('div');
        let password=document.getElementById('password')
        let rag=/^[a-zA-Z]\w{5,15}$/;

        input.onblur=function(){
            if(rag.test(password.value)){
               input.style.border = "1px solid green"
            }else{
                input.style.border = "1px solid red"
               div.innerText="请输入数字、大小写字母、下划线组成的长度为6~16位的字符";
               div.style.color="red";
            }
        }
    </script>
</body>
</html>